<template>
  <div>
    <el-dialog title="标签打印" :visible.sync="tagDialogVisible" :before-close="closeDialog" :close-on-click-modal="false"
               v-on:open="loadDate">
      <el-form>
        <el-form-item style="width: 100%;border-color:pink;">
          <el-radio style="width: 100%;border-color:pink;" v-model="type" :label="1" @change.native="changeNo()">打印容器标签</el-radio>
            <template v-if="cyeis">
            请选择周期：
            <el-select v-model="clcye" placeholder="请选择">
              <el-option
                v-for="item in clcyeArr"
                :key="item.cycles"
                :label="item.cycles"
                :value="item.cycles">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item style="width: 100%;border-color:pink;">
          <el-radio style="width: 100%;border-color:pink;" v-model="type" :label="2" @change.native="changeNo()">打印腕带标签</el-radio>
        </el-form-item>
        <!-- <el-form-item style="width: 100%;border-color:pink;">
          <el-radio v-model="type" :label="3">打印选定试验环节标签</el-radio>
          <el-select v-model="processIdList" placeholder="请选择试验环节" style="margin-left: 10px;" v-if="type ==3"
                     :multiple="true">
            <el-option
              v-for="item in processList"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item style="float: right">
          <el-button type="primary" @click="toPrint"><i class="fa fa-print"></i>打印</el-button>
          <el-button @click.native="closeDialog">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import http from '../../../api/http'
  import constants from '../../../commons/constants'

  export default {
    data() {
      return {
        type: 1,
        processList: [],
        processIdList: [],
        server: constants.server,
        projectId: this.$utils.getCurrenrProject().id,
        projectNum: this.$utils.getCurrenrProject().num,
        cList: null,
        subjectInfo: null,
        clcye:'1',
        clcyeArr:[],
        cyeis:true,
      }
    },
    props: {
      tagDialogVisible: {
        type: Boolean,
        default: false
      },
      subjectNum: {type: String},
      subjectId: {type: String}
    },
    computed: {},
    methods: {
      closeDialog() {
        this.$parent.closeTagDialog();
      },
      // 加载受试者实验流程环节
      loadDate() {
        var vm = this;
        vm.processIdList = [];
        vm.type = 1;
        http.postData(vm, "/pt/process/list4Print/" + vm.projectId, {}, function (resp) {
          var ret = resp.body;
          if (ret.code === '111') {
            vm.processList = ret.value;
          } else {
            return false
          }
        });
      },
      changeNo(){
        var vm = this;
        if(vm.type==1){
          vm.clcye="1";
          vm.cyeis=true;
        }else if(vm.type==2){
          vm.clcye="";
          vm.cyeis=false;
        }
      },
      toPrint() {
        var vm = this;
        if (vm.type != 3) {
          vm.processIdList = [];
        }
        // 加载受试者实验流程环节
        http.postData(vm, "/pt/process/print/" + vm.subjectId + "-" + vm.projectId + "-" + vm.type+"-"+vm.clcye, {processIdList: vm.processIdList}, function (resp) {
          var ret = resp.body;
          console.log(resp);
          if (ret.code === '111') {
            var cList = ret.value.cList;
            var subjectInfo = ret.value.subjectInfo;
            var printHtml = "<button onclick='this.style.display=\"none\";window.print();window.close();' style='font-size: 1.3rem;color: white;background-color:red;'>请确认条码完全加载后再点击打印</button>" +
              "<ul class=\"tagList\">\n";
            if(subjectInfo != undefined && subjectInfo !=null&&vm.type == 2){
              printHtml +=
                "<li class='isLi'>\n" +
                "     <img class='isImg' src=\"" + vm.server + "/createBarCode/S" + vm.subjectId + "\">" +
                // "     <div>SubjectId:" + vm.subjectNum + "</div>\n" +
                "     <div class='isdiv'>" + subjectInfo.name+"&nbsp;&nbsp;"+subjectInfo.randomNum+"&nbsp;&nbsp;"+subjectInfo.medicine+"</div>" +
                 // "     <div class='isdiv'>" + subjectInfo.name+"," + subjectInfo.sex+"，" + subjectInfo.age+"岁<br>其他："+ vm.projectNum+"</div>" +
                // "     <div>" + vm.projectNum+"</div>\n" +
                "</li>\n";
            }
            if(cList!=undefined&&cList!=null&&cList.length>0&&vm.type == 1) {
              for(var j=0;j<cList.length;j++) {
                var item=cList[j];
                printHtml +=
                  "<li v-for=\"item in cList\">\n" +
                  "     <img src=\"" + vm.server + "/createBarCode/C"+item.id+"\">\n" +
                  // "     <div>SubjectId:"+vm.subjectNum+"</div>\n" +
                  "     <div>"+subjectInfo.randomNum+"&nbsp;"+"P"+item.cycles+"&nbsp;"+item.name+"</div>\n" +
                  // +(item.pkTime!=undefined&&item.pkTime!=null&&item.pkTime!=''?('PKTime:'+item.pkTime+'&nbsp;'):'')
                  // "     <div>"+item.name+vm.projectNum+"</div>" +
                  // "     <div>"+vm.projectNum+"</div>\n" +
                  "</li>\n";
              }
            }
            printHtml+="</ul><style>\n" +
                " body{padding:0px;} " +
                // " .isImg{float:left;margin-right:3mm;} " +
                // " .isdiv{float:left;margin-top:2mm;} " +
                // " .tagList .isLi{width:140mm;} " +
                ".tagList li * {font-size:0.2rem;padding:0px;}\n" +
                "  .tagList li {list-style: none;width:30mm;height:15mm;margin-left:-10mm;word-break: normal;padding:0.1mm;text-align:center;font-size:8px;}\n" +
                "  .tagList li img {width:25mm;height:10mm;margin-left:-2mm;}" +
                "@media screen {"+
                "  .tagList li img {width:25mm;height:10mm;margin-left:-2mm;}" +
                "  }" +
                "  @media print {\n" +
                "    .tagList li {\n" +
                "      width: 40mm;\n" +
                "      height:20mm;\n" +
                "      page-break-after:always;\n" +
                "      word-break: normal;" +
                "      padding:0.1mm;" +
                "      text-align:center;" +
                "    }\n" +
                "  .tagList li img {width:25mm;height:10mm;margin-left:-2mm;}" +
                "  }</style>";
              var wid = window.open('blank', '_blank', 'width=100px');
              wid.document.write(printHtml);
          } else {
            return false
          }
        });
      }
    },
    created() {
      var vm=this;
        http.postData(vm, '/pt/process/queryCycles/'+vm.projectId,{}, function (resp) {
              console.log(resp)
              vm.clcyeArr=resp.body.value;
                // if(resp.body.code=="111"){

                // }else{
                //   alert("未录入");
                // }

          });
    }
  }
</script>
<style>

</style>
